<template>
	<view class="info-page">
		<!-- 顶部栏 -->
		<view class="info-header">
			<text class="back-arrow">＜</text>
			<text class="info-title">个人信息</text>
			<view class="info-actions">
				<text class="dot">•••</text>
				<text class="camera-icon">◎</text>
			</view>
		</view>
		<!-- 信息卡片 -->
		<uni-card class="info-card" is-shadow>
			<view class="info-row avatar-row">
				<text class="info-label">头像</text>
				<view class="info-avatar-box">
					<image class="info-avatar" src="https://img.yzcdn.cn/vant/cat.jpeg" />
					<text class="arrow">＞</text>
				</view>
			</view>
			<view class="info-divider"></view>
			<view class="info-row">
				<text class="info-label">姓名</text>
				<text class="info-value">张先生</text>
			</view>
			<view class="info-divider"></view>
			<view class="info-row">
				<text class="info-label">电话</text>
				<text class="info-value">15023457896</text>
			</view>
		</uni-card>
		<view class="edit-btn-box">
			<button class="edit-btn" @click="goToEdit">修改信息</button>
		</view>
	</view>
</template>

<script setup>
function goToEdit() {
	uni.navigateTo({
		url: '/pages/lsa-xgxx/lsa-xgxx'
	})
}
</script>

<style>
.info-page {
	background: #f9f9f9;
	min-height: 100vh;
}
.info-header {
	background: linear-gradient(135deg, #2d8cf0 60%, #5bc0eb 100%);
	padding-top: 60rpx;
	padding-bottom: 60rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-arrow {
	position: absolute;
	left: 30rpx;
	top: 60rpx;
	color: #fff;
	font-size: 40rpx;
}
.info-title {
	color: #fff;
	font-size: 36rpx;
	font-weight: bold;
}
.info-actions {
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	color: #fff;
}
.info-card {
	border-radius: 28rpx;
	margin: -60rpx 20rpx 0 20rpx;
	box-shadow: 0 2rpx 8rpx #eee;
	padding: 0;
}
.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 36rpx 32rpx;
	font-size: 30rpx;
	background: #fff;
}
.avatar-row {
	padding-right: 16rpx;
}
.info-label {
	color: #222;
}
.info-value {
	color: #222;
}
.info-avatar-box {
	display: flex;
	align-items: center;
	gap: 10rpx;
}
.info-avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
}
.arrow {
	color: #bbb;
	font-size: 36rpx;
	margin-left: 10rpx;
}
.info-divider {
	height: 2rpx;
	background: #f3f3f3;
	margin: 0 32rpx;
}
.edit-btn-box {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
}
.edit-btn {
	background: linear-gradient(90deg, #2d8cf0 60%, #5bc0eb 100%);
	color: #fff;
	font-size: 32rpx;
	border: none;
	border-radius: 40rpx;
	padding: 20rpx 80rpx;
	box-shadow: 0 2rpx 8rpx #eee;
}
</style>
